<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>11_固定定位广告条</title>
  <style>
    .top {
      background-color: #5aa4ae;
      height: 120px;
      position: fixed;
      top: 0;
      /*viewport 视口,vw视口宽度百分比,vh视口高度百分比*/
      width: 100vw;
      /*left: 0;*/
      /*right: 0;*/
    }
    .main {
      margin-top: 130px;
    }
    .left,.right {
      width: 60px;
      height: 200px;
      position: fixed;
      top: 300px;
    }
    .left {
      background-color: #fff799;
      left: 20px;
    }
    .right {
      background-color: #f35336;
      right: 20px;
    }
  </style>
</head>
<body>
<div class="top">顶部广告</div>
<div class="left">左侧广告</div>
<div class="right">右侧广告</div>
<div class="main">我是内容
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus asperiores assumenda doloremque incidunt
    laudantium maxime molestias similique tempora tenetur voluptas? Accusantium alias animi, beatae dignissimos
    doloremque nam natus recusandae tempora.
  </div>
  <div>Aliquam at culpa ex, in iste laborum minus modi mollitia perspiciatis provident, quasi repellendus, veritatis.
    At, consequatur cupiditate, dicta doloremque dolores ducimus harum hic iste molestiae optio, possimus totam veniam!
  </div>
  <div>A animi culpa dolorum enim exercitationem fugiat harum ipsa laudantium officia quam quis quo, sequi veniam! Dicta
    dolor, eos molestiae, nam pariatur perferendis provident, quasi quisquam rem sed voluptatem voluptatum.
  </div>
  <div>Aut beatae corporis, dignissimos eius error, maxime nisi odit officiis perspiciatis, quae quisquam ratione
    repellat saepe sint voluptas! Architecto at consequuntur ducimus ea eligendi eos laudantium nisi officiis, porro
    unde.
  </div>
  <div>Ab aliquam aliquid atque dolor maiores maxime necessitatibus neque, nostrum officiis reiciendis repellat,
    suscipit! Accusamus aliquid consectetur cupiditate eius error, fugit iste omnis perferendis, possimus praesentium
    quos ut voluptas, voluptatem!
  </div>
  <div>Ab blanditiis doloremque, esse eum fuga hic illo itaque obcaecati odio omnis optio repellat reprehenderit soluta
    ullam voluptas? Cum, doloribus earum explicabo nostrum ratione recusandae sint. Accusantium beatae itaque vel.
  </div>
  <div>Accusamus beatae deserunt dolor eum odio quia tempora temporibus? Accusamus autem corporis ducimus esse ex
    reprehenderit sint voluptatem! Amet at atque consequatur cumque eius labore minima nam quae quos tenetur.
  </div>
  <div>Architecto beatae blanditiis consectetur dolor ducimus enim expedita ipsa molestias necessitatibus obcaecati odit
    quaerat quibusdam velit veritatis, voluptate! Consectetur, culpa fuga ipsa laudantium magni molestiae reprehenderit
    repudiandae saepe sit sunt?
  </div>
  <div>Et ex, itaque labore magnam molestiae optio sequi voluptatibus? Ad architecto debitis error est eum fugiat
    laudantium magnam maiores minima molestias nostrum pariatur placeat, quod tempore ullam? Ipsam, maxime, reiciendis!
  </div>
  <div>Ad architecto aut culpa cupiditate deleniti deserunt eius eveniet fuga fugit incidunt iusto, labore natus neque
    nihil officiis provident ratione repudiandae temporibus ut, voluptate? Aut fugit hic modi porro vero?
  </div>
  <div>Amet aperiam deleniti dolore ex in minus nemo quaerat totam unde, vitae. Cupiditate deserunt ea, harum inventore
    laboriosam, molestiae molestias odit praesentium quaerat quam quia sapiente similique tempora temporibus voluptate!
  </div>
  <div>Ab aliquam architecto blanditiis cumque deleniti ducimus eligendi eveniet facere illum ipsum iusto laboriosam
    libero maiores minima, necessitatibus non, provident quidem reiciendis saepe sint soluta ullam voluptate voluptatem
    voluptates voluptatum.
  </div>
  <div>Adipisci aperiam asperiores atque commodi exercitationem pariatur quaerat quas quasi quisquam voluptas. Aperiam,
    atque, culpa distinctio ducimus eaque earum exercitationem labore laudantium nesciunt obcaecati qui quo reiciendis
    similique tempore tenetur.
  </div>
  <div>Accusamus, aspernatur atque et fugit ipsum iure libero molestiae, nobis, quod recusandae saepe sit voluptas
    voluptatum? Aut dolores dolorum ducimus maxime minus optio quae quibusdam recusandae. Accusantium labore praesentium
    totam.
  </div>
  <div>Aut, excepturi explicabo laboriosam nobis nulla repellendus saepe vitae voluptate! Asperiores et ipsam maxime,
    nostrum possimus quod ratione. Fuga iusto, porro. Enim possimus recusandae vel. Aperiam nulla quam repellendus
    veniam.
  </div>
  <div>Ab corporis debitis delectus deserunt dolorem facere fuga minima, mollitia, nobis omnis perferendis ratione rem
    sit! Accusamus architecto autem corporis deserunt facere hic magni maiores, maxime numquam qui soluta, voluptatibus!
  </div>
  <div>Ex numquam perferendis quo suscipit tempore! Accusantium aliquid consectetur corporis dolor dolore dolores ipsam
    labore, laborum magni modi officia omnis pariatur saepe sapiente, soluta ut vel. Cumque explicabo nisi qui!
  </div>
  <div>Ab eum hic placeat quia saepe ut. A aliquam at dolorem facilis iste labore non, numquam, perspiciatis, porro
    provident rerum sint voluptate voluptates! Aliquam, amet corporis eos mollitia quod veniam.
  </div>
  <div>Animi aut blanditiis quasi? Ab aliquid, animi commodi consectetur cum deserunt dolorem eligendi eveniet facere id
    laboriosam libero minus molestiae nam nobis, obcaecati quia quod similique sit tempora veniam vero.
  </div>
  <div>Debitis molestias quo sapiente velit. Doloribus id iure placeat quam soluta, ut voluptas. Alias cumque earum eum
    laudantium libero, minima odio officia officiis pariatur rem repudiandae, sed totam vitae? Quo.
  </div>
  <div>A eveniet molestias non obcaecati quos totam veniam vitae? Alias at dolorem ducimus earum est id iure libero
    molestiae mollitia numquam officiis optio placeat quidem quisquam, reiciendis vitae voluptas voluptatibus.
  </div>
  <div>Aut autem cum expedita hic quisquam tempore, totam. A accusantium atque culpa dolorem dolores esse fuga, id
    magnam necessitatibus nobis placeat possimus tempora vel. Illo molestiae nam quod suscipit tempore?
  </div>
  <div>Ab aliquam amet aperiam assumenda aut debitis hic iusto molestias nam nemo nobis odio officiis, pariatur
    perferendis quibusdam quod sapiente sint vitae! Assumenda enim ex recusandae veniam vitae voluptatibus voluptatum.
  </div>
  <div>Corporis delectus dignissimos doloribus esse excepturi magni necessitatibus quod recusandae sequi. Ab aperiam
    beatae facilis fugit ipsum magni, perferendis porro quasi. A consectetur cum dolor maiores neque omnis porro,
    voluptatum!
  </div>
  <div>Aperiam assumenda autem beatae consequatur culpa cupiditate debitis dignissimos dolor doloribus eligendi enim
    exercitationem fugit hic illum natus, nemo neque odit officiis placeat praesentium quia quis quisquam reiciendis
    voluptas voluptate.
  </div>
  <div>Assumenda aut consequuntur delectus eligendi enim et eveniet fuga harum illo in inventore ipsa, itaque
    necessitatibus nisi odio quaerat quidem rerum sed sequi, sint soluta suscipit temporibus ullam unde vel?
  </div>
  <div>Distinctio excepturi fuga natus porro sunt! Aperiam aut, et in ipsum iste itaque, iusto libero magnam nihil
    quaerat reprehenderit, sequi tempore voluptates! Ad et, ipsa quam saepe sint suscipit voluptatibus?
  </div>
  <div>Aperiam consectetur eum exercitationem fugiat, laudantium praesentium quaerat quasi. Adipisci aliquid,
    consequatur deleniti eaque enim esse explicabo illo, laudantium mollitia nulla odit, praesentium quis recusandae rem
    saepe unde veniam veritatis!
  </div>
  <div>A aliquid consequuntur cumque earum fugit ipsa labore nam, quia totam velit vitae voluptate. A aliquid assumenda,
    atque aut blanditiis consequuntur dolor ducimus laboriosam laborum nemo optio, porro, quae quisquam!
  </div>
  <div>Commodi corporis culpa deserunt distinctio est iusto libero molestiae nam nesciunt non omnis optio porro, quae
    quaerat, quas quidem rem reprehenderit sed tenetur ut vel veniam voluptas voluptate. Ipsam, ut!
  </div>
  <div>Aperiam dolorem eligendi fugit laudantium libero minus neque repudiandae rerum. Accusantium aspernatur corporis
    deserunt esse ex incidunt iure laboriosam laudantium, libero magnam maxime nihil quasi quos tenetur velit vitae
    voluptate.
  </div>
  <div>Labore officia placeat porro saepe suscipit, tenetur! Aperiam consectetur consequuntur culpa dolorum enim fuga
    hic labore laborum minima natus omnis quam qui quos repellendus, reprehenderit sequi similique suscipit totam ut.
  </div>
  <div>Amet deleniti neque quas sed sint? Aut, deleniti dignissimos, est eum, fuga itaque laborum libero minus mollitia
    nesciunt nobis perferendis perspiciatis quibusdam sunt tempore veniam voluptas. Dolor earum vero voluptatem.
  </div>
  <div>Accusamus aliquid cum dignissimos expedita ipsum minima obcaecati odit quaerat, quia reprehenderit sapiente sint
    veniam, voluptas! Ab alias, aperiam doloribus dolorum ducimus enim id illo natus officia optio sit voluptatum.
  </div>
  <div>Aspernatur dolor modi quaerat! Aliquid consequuntur dolorem esse eveniet hic molestias perferendis quos
    reiciendis vitae voluptatem? Assumenda, at deleniti dicta magni, maxime minima nisi quas recusandae reprehenderit
    similique sit vel?
  </div>
  <div>Architecto atque cupiditate delectus doloribus ipsam iure modi molestias nisi nostrum quam, quas qui quia, quidem
    quos reiciendis sint tempore veritatis vitae voluptate voluptatibus. Accusantium exercitationem in inventore odit
    suscipit.
  </div>
  <div>Asperiores beatae debitis dignissimos dolores ducimus, fugiat, hic illum incidunt ipsam ipsum labore minima nemo
    nihil numquam quaerat quis recusandae sint soluta veniam voluptatibus. Adipisci non perspiciatis sapiente unde vero!
  </div>
  <div>Architecto earum expedita iste nobis provident sunt voluptates. Beatae blanditiis consequatur, facilis in
    pariatur rerum totam! Alias commodi consectetur excepturi, explicabo fugiat in inventore, maiores officia, placeat
    quas quis tempora!
  </div>
  <div>Assumenda culpa cupiditate debitis delectus enim et eveniet id itaque non nostrum veniam, voluptas! Et excepturi
    hic incidunt nemo nisi, perferendis voluptatibus. Aspernatur corporis dolor esse modi quis sed ullam?
  </div>
  <div>Accusantium consequuntur, esse mollitia omnis pariatur repellat. Autem cum impedit officia quae quam sed
    temporibus voluptates? A, ab, accusantium, ad aliquam dicta eius eos esse excepturi harum laudantium nam voluptate.
  </div>
  <div>Ab, aliquam cumque, deserunt doloribus, dolorum eos facere id inventore labore laboriosam maiores nemo nulla
    perspiciatis possimus quibusdam reiciendis sit temporibus ut? Blanditiis corporis cupiditate doloremque, earum
    exercitationem inventore itaque.
  </div>
  <div>Delectus ea eius repudiandae sapiente suscipit! Aliquam beatae fuga iusto necessitatibus reprehenderit. Adipisci
    amet aspernatur cumque dicta dolore impedit maxime nam neque obcaecati odit pariatur qui, quis quo, ullam voluptas!
  </div>
  <div>Ad consequatur cum deleniti enim maxime repellendus tempore? Aut beatae consectetur dignissimos eius, ex, fuga
    molestiae natus nisi perferendis quae rerum suscipit ullam voluptas. Ad aperiam deserunt dolores quibusdam suscipit.
  </div>
  <div>Accusamus accusantium amet asperiores dicta distinctio eveniet, harum nisi saepe. Accusamus architecto
    consectetur corporis ea error exercitationem fuga fugit, id ipsa maxime nesciunt, nihil nobis possimus quae
    repudiandae rerum tempora!
  </div>
  <div>Autem, culpa delectus deleniti distinctio ea fugiat labore natus placeat quasi quidem quisquam similique
    voluptas? Assumenda consequuntur cum delectus, error exercitationem in necessitatibus qui reprehenderit repudiandae
    sapiente similique veniam vero!
  </div>
  <div>A debitis inventore laboriosam magni numquam provident quis rem repudiandae similique. Accusantium ad adipisci
    asperiores dolorem eius ipsum iure iusto neque odio, perspiciatis possimus quae ratione repellat similique unde
    voluptas!
  </div>
  <div>Architecto at cumque deserunt dicta dolores error, eum explicabo facere fuga fugiat illo impedit incidunt ipsa
    itaque minus necessitatibus nisi, nobis nostrum placeat quae qui quibusdam quidem, reiciendis saepe voluptatibus.
  </div>
  <div>Animi deleniti dolor eos et ex facilis harum laudantium magni maiores totam? Accusantium adipisci alias
    architecto error, fuga illo iusto minima nulla odit, optio, quo sapiente voluptatem voluptates. Beatae, temporibus.
  </div>
  <div>Architecto, dolor eius eveniet facere ipsum iste laudantium quidem ullam? Animi aperiam blanditiis dicta
    dignissimos doloremque ex impedit in labore magnam minima minus molestias nemo qui reiciendis repudiandae sunt,
    vitae.
  </div>
  <div>Aperiam aut id laboriosam quasi quod ratione reprehenderit? Aspernatur autem debitis dicta eos esse facere,
    incidunt iure officiis, pariatur quisquam quo voluptates? A accusamus architecto consequuntur enim eos fugit quos!
  </div>
  <div>Animi blanditiis dolorum ducimus earum eius esse explicabo fugiat harum libero minima molestias mollitia nam
    nobis perspiciatis praesentium, quo recusandae rerum saepe similique sint, suscipit velit vero voluptatem.
    Accusamus, error!
  </div>
  <div>Ab aliquid blanditiis doloremque dolores eaque esse est expedita explicabo harum ipsam, ipsum labore magnam,
    minima molestias neque nobis non pariatur praesentium quibusdam quidem quod reprehenderit soluta tempora vero vitae.
  </div>
  <div>Aliquid culpa distinctio dolorum ea, eaque earum facere id iste libero minima nemo nesciunt nostrum odio officia,
    quia quos repellendus sint tempora totam ut! Error harum ipsa necessitatibus non quibusdam.
  </div>
  <div>Aliquid dolorem fuga ipsa odit provident quasi, soluta sunt. Amet ducimus harum in laboriosam laudantium maiores
    mollitia nisi, obcaecati quaerat qui sapiente ullam velit voluptate. Dolorem hic mollitia quidem repudiandae!
  </div>
  <div>Accusantium, placeat, quia! Consequatur delectus explicabo facilis hic iste iure nesciunt pariatur placeat quidem
    unde. Ad dolor dolore, eos ex in iusto quibusdam quisquam similique soluta voluptates? Consequuntur, nobis, quis!
  </div>
  <div>In itaque iusto necessitatibus numquam obcaecati odit porro? Culpa officiis optio qui quos repellat tempore
    veritatis voluptatem? Accusamus adipisci at culpa dolores impedit, possimus praesentium quam repellat similique sunt
    temporibus.
  </div>
  <div>Accusamus, adipisci commodi libero magnam maiores, natus necessitatibus nostrum numquam, odio quas saepe soluta
    sunt totam. Architecto aspernatur consectetur culpa earum eius excepturi fugiat, ipsam laborum laudantium magnam,
    suscipit velit.
  </div>
  <div>Ab adipisci alias amet corporis dolor doloremque eos, error est eveniet, ipsum libero maxime modi nemo nesciunt
    nihil nostrum obcaecati omnis quis saepe sit. Animi eaque necessitatibus nisi officiis reiciendis.
  </div>
  <div>Animi asperiores culpa dignissimos eius eveniet exercitationem fugit impedit in magnam natus nihil officia
    pariatur, provident quo quod repudiandae vero. Adipisci, architecto at deleniti iusto libero qui ratione voluptas
    voluptatum?
  </div>
  <div>Alias aliquam animi consectetur dignissimos dolore error est explicabo facilis, hic ipsum itaque laborum magni
    molestiae molestias necessitatibus neque, non officia, provident quas qui quibusdam quidem rerum suscipit tempora
    voluptatum?
  </div>
</div>

</body>
</html>